<template>
  <div class="woBoxs">
    <navconH5 :leftShow="false" texts="我的" />

    <div class="tables_info">
      <div class="tables_info_img"> 
        <t-avatar
          class="avatar-example external-class-content"
          shape="circle"
          size="56px"
          style="border: 2px solid #ffffff; border-radius: 50%"
          >{{ info.username[0] }}</t-avatar
        >
      </div>
      <div class="tables_info_name">
        <div class="tables_info_name_name1">
          {{ info.username }}
        </div>
        <div class="tables_info_name_name2">
          <span v-if="authority([1])">超级管理员</span> 
          <span v-if="authority([2])">在地区域负责人</span>
          <span v-if="authority([3])">线上区域负责人</span>
          <span v-if="authority([4])">在地工作人员</span>
          <span v-if="authority([5])">线上工作人员</span>
        </div>
      </div>
    </div>

    <div class="listGrios">
      <t-cell-group  >
        <t-cell title="超级管理员" arrow hover :bordered="false" @click="toruuts('superAdmin')" v-if="authority([1])">
          <template #leftIcon>
            <el-icon  style="color: #000;font-size: 18px;"><User /></el-icon> 
          </template> 
        </t-cell>
        <t-cell title="科目管理" arrow hover :bordered="false" @click="toruuts('h5subjects')"  v-if="authority([1])">
          <template #leftIcon> 
            <el-icon  style="color: #000;font-size: 18px;"><Connection /></el-icon>
          </template> 
        </t-cell>
        <t-cell title="负责人管理" arrow hover :bordered="false"  @click="toruuts('h5principal')"  v-if="authority([1])">
          <template #leftIcon>
            <el-icon  style="color: #000;font-size: 18px;"><Place /></el-icon> 
          </template> 
        </t-cell> 
        <t-cell title="工作人员管理" arrow hover :bordered="false"  @click="toruuts('h5workerlist')"  v-if="authority([1,2,3])">
          <template #leftIcon>
            <el-icon  style="color: #000;font-size: 18px;"><Coordinate /></el-icon> 
          </template> 
        </t-cell>
        
        <t-cell title="工作情况" arrow hover :bordered="false" @click="toruuts('h5rywock')"  v-if="authority([1,2,3])"> 
          <template #leftIcon>
            <el-icon  style="color: #000;font-size: 18px;"><Guide /></el-icon> 
          </template> 
        </t-cell> 
        <t-cell title="修改密码" arrow hover :bordered="false" @click="toruuts('password')">
          <template #leftIcon>
            <el-icon  style="color: #000;font-size: 18px;"><EditPen /></el-icon> 
          </template> 
        </t-cell> 
      </t-cell-group>
    </div>
    <div class="listbuttons" @click="exit">
      <span>退出登录</span>
    </div>
  </div>
</template>
  <script  setup>
import { ref, reactive, defineProps, toRefs, onMounted, inject } from "vue";
import navconH5 from "@/components/navconH5.vue";

import { BrowseOffIcon } from "tdesign-icons-vue-next";
import { Message } from "tdesign-mobile-vue";
import { useRouter, useRoute } from "vue-router";
import { useMutitabsStore } from "@/store/mutitabs";
import { useSiteThemeStore } from "@/store/siteTheme";

import { setStorage, getStorage } from "@/utils/util";
import { AppIcon } from "tdesign-icons-vue-next";
const route = useRoute(); // 使用 useRoute 获取当前路由信息
const router = useRouter(); //获取当前路由
const $dialog = inject("$dialog");
const info = JSON.parse(getStorage("userinfo"));
const userInfo = ref(Number(JSON.parse(getStorage("groupId")))); //权限
const mutitabsStore = useMutitabsStore();
const siteThemeStore = useSiteThemeStore();

const authority = (groupArr = [0]) => {
  // 权限筛选
  let userInfos = userInfo.value;
  // 当前权限和传来的权限组进行对比
  if (groupArr.some((item) => Number(item) === userInfos)) return true;
  return false;
};
const exit = () => {
  console.log("点击了退出登录");
  $dialog.confirm({
    title: "退出登录",
    content: `是否退出当前登录？`,
    confirmBtn: { content: '确认', theme: 'danger' },
    cancelBtn: "取消",
    onConfirm: () => {
      // obj.status = 2;
      mutitabsStore.logout("false");
      sessionStorage.clear();
      localStorage.clear();
      siteThemeStore.$reset();
      router.replace({ path: "/login" }).then(() => {
        window.location.reload();
      });
      Message.success({
            content: "退出成功", 
            placement:"center"
          });
    },
  });
};
const toruuts=(type)=>{
  console.log('路由跳转')
  router.push({ path: `/${type}` })
}
console.log(info, "--------info");
</script>
  
  <style lang="scss" scoped>
.woBoxs {
  padding: 0 15px;
}
.tablesTop {
  height: 44px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="scss"  >
 .password_boxs{
  font-size: 16px;
  padding: 0 15px;
  padding-top: 40px;
 }
 .user-info-password-texts{
  .texts{
    font-size: 25px;
    font-weight: 600;
  }
  font-size: 20px;
  line-height: 35px;
 }
 .tables_info{
  display: flex;
  margin-top: 20px;
  margin-bottom: 35px;

  .tables_info_name{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 10px;
    .tables_info_name_name1{
      font-size: 16px;

    }
    .tables_info_name_name2{
      font-size:12px ;
      color: rgba(136, 136, 136, 1);
    }
  }
 }
 .listGrios{
  border-radius: 10px;
  padding: 10px 0;
  background: #fff; 
  overflow: hidden;
  .t-cell__title-text{
    font-size: 14px !important;
  }
 }
 .listbuttons{
  width: 100%;
  height: 48px;
  background: #fff;
  color: rgba(255, 43, 43, 1);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: 35px;
 }
</style>
  